<!-- 选择新增的流程 -->
<template>
	<el-dialog
		v-model="state.dialogVisible"
		title="选择新增的流程"
		width="50%"
		conter
		:before-close="handleClose"
	>
		<public-table
			class="m-t20"
			:index="true"
			:page="state.page"
			border
			:tableData="allNodes"
			:isPaging="false"
			:tableOption.sync="state.nodeOption"
		>
			<template #operation="scope">
				<!-- <span
              style="cursor: pointer;color: #fc7037"
              @click="toPath(scope.row)"
          >{{scope.row.operation}}</span> -->
				<el-button
					color="#FF7B50"
					@click="updata(scope.row)"
					:disabled="showArrayList.some((v) => v.nodeId == scope.row.nodeId)"
					style="color: #fff"
					type="primary"
					>选择</el-button
				>
			</template>
		</public-table>

		<template #footer>
			<span class="dialog-footer">
				<!-- <el-button type="primary"  @click="state.dialogVisible = false">
					提交
				</el-button> -->
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
import { ref, reactive, watch, computed } from "vue";
import PublicTable from "@/components/PublicTable";

import { ElDialog, ElForm } from "element-plus";

const props = defineProps({
	allNodes: {
		type: Object,
		required: true,
	},
	showArrayList: {
		type: Object,
		required: true,
	},
	type: {
		type: String,
	},
});

const state = reactive({
	page: {
		total: 0,
		current: 1,
		size: 50,
	},
	nodeOption: [
		{ label: "实施流程名称 ", prop: "nodeName" },
		{ label: "操作", prop: "operation", slot: true, width: 200 },
	],
	dialogVisible: false,
});

const emits = defineEmits([""]);
const updata = (row) => {
	emits("updataAddProcess", row);
	handleClose();
};

const handleClose = () => {
	state.dialogVisible = false;
};

// 开启弹窗
const open = () => {
	state.dialogVisible = true;
	console.log("showArrayList", props.showArrayList);
};

defineExpose({ open });
</script>

<style lang="scss" scoped>
:deep(.table-content) {
	max-height: 500px;
	overflow: auto;
}
</style>
